<template>
    <el-container>
        <!-- <el-aside width="25%">
            <el-card body-style="padding:30px 10px;" style="height:100%">
                <div class="left">
                    <div class="tabbar">
                        <div class="tabList" :class="menuId==item.id?'background':''" v-for="item in menuList" :key="item.id" @click="menuChange(item)">{{item.name}}</div>
                    </div>
                    <div v-if="menuId==0">
                        <h2>某设备</h2>
                        <div class="display" style="align-items: flex-start;">
                            <div class="title">设备图片</div>
                            <div class="detail"><el-image class="img" :src="info.img" :initial-index="4" fit="cover" :preview-src-list="info.img" /></div>
                        </div>
                        <div class="display">
                            <div class="title">设备规格</div>
                            <div class="detail">{{info.spec}}</div>
                        </div>
                        <div class="display">
                            <div class="title">设备状态</div>
                            <div class="detail"><sc-status-indicator type="success"></sc-status-indicator>{{info.state_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">设备类别</div>
                            <div class="detail">{{info.class_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">所属组织</div>
                            <div class="detail">{{info.org_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">所属部门</div>
                            <div class="detail">{{info.dep_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">车间</div>
                            <div class="detail">默认</div>
                        </div>
                        <div class="display">
                            <div class="title">创建时间</div>
                            <div class="detail">{{info.create_time}}</div>
                        </div>
                        <div class="display" style="align-items: flex-start;">
                            <div class="title">二维码</div>
                            <div class="detail"><el-image class="img" :src="info.qrcode" :initial-index="4" fit="cover" /></div>
                        </div>
                    </div>
                    <div v-if="menuId==1">
                        <div class="display">
                            <div class="title">区域</div>
                            <div class="detail">{{info.region}}</div>
                        </div>
                        <div class="display">
                            <div class="title">安装地点</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title">使用部门</div>
                            <div class="detail">{{info.dep_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">产线</div>
                            <div class="detail">{{info.line}}</div>
                        </div>
                        <div class="display">
                            <div class="title">备注</div>
                            <div class="detail">{{info.position_remark}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==2">
                        <div class="display">
                            <div class="title">供应商</div>
                            <div class="detail">{{info.apply_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">联系方式</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title">负责人</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title">出厂编号</div>
                            <div class="detail">{{info.factory_code}}</div>
                        </div>
                        <div class="display">
                            <div class="title">验收日期</div>
                            <div class="detail">{{info.check_date}}</div>
                        </div>
                        <div class="display">
                            <div class="title" style="width: 100px;">使用期限(月)</div>
                            <div class="detail">{{info.term}}</div>
                        </div>
                        <div class="display">
                            <div class="title">制造日期</div>
                            <div class="detail">{{info.make_date}}</div>
                        </div>
                        <div class="display">
                            <div class="title">备注</div>
                            <div class="detail">{{info.make_remark}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==3">
                        <div class="display">
                            <div class="title">资产类别</div>
                            <div class="detail">{{info.asset_class_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title">资产卡片</div>
                            <div class="detail">{{info.asset_card}}</div>
                        </div>
                        <div class="display">
                            <div class="title">制造日期</div>
                            <div class="detail">{{info.asset_make_date}}</div>
                        </div>
                        <div class="display">
                            <div class="title">验收日期</div>
                            <div class="detail">{{info.asset_check_date}}</div>
                        </div>
                        <div class="display">
                            <div class="title">使用期限</div>
                            <div class="detail">{{info.asset_term}}</div>
                        </div>
                        <div class="display">
                            <div class="title">备注</div>
                            <div class="detail">{{info.asset_make_remark}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==4">
                        <div class="display">
                            <div class="title">保修期</div>
                            <div class="detail">{{info.period}}</div>
                        </div>
                        <div class="display">
                            <div class="title">维保单位</div>
                            <div class="detail">{{info.maintenance_company}}</div>
                        </div>
                        <div class="display">
                            <div class="title">维保电话</div>
                            <div class="detail">{{info.maintenance_tel}}</div>
                        </div>
                        <div class="display">
                            <div class="title">备注</div>
                            <div class="detail">{{info.maintenance_remark}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==5">
                        <div class="display">
                            <div class="title width">检验到期日</div>
                            <div class="detail">{{info.due_date}}</div>
                        </div>
                        <div class="display">
                            <div class="title width">到期日提醒</div>
                            <div class="detail">{{info.remind}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==6">
                        <div class="display">
                            <div class="title">设备名称</div>
                            <div class="detail">{{info.sub_title}}</div>
                        </div>
                        <div class="display">
                            <div class="title" style="width:100px">设备注意事项</div>
                            <div class="detail">{{info.note}}</div>
                        </div>
                    </div>
                    <div v-if="menuId==7">
                        <div class="display">
                            <div class="title">文件</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title">图片</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title">附件</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                        <div class="display">
                            <div class="title width">设备二维码</div>
                            <div class="detail">{{info.place}}</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-aside> -->
        <el-container>
            <el-header>
                <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
                    <el-tab-pane label="保养记录" name="0"></el-tab-pane>
                    <el-tab-pane label="维修记录" name="1"></el-tab-pane>
                    <el-tab-pane label="巡检记录" name="2"></el-tab-pane>
                    <el-tab-pane label="点检记录" name="3"></el-tab-pane>
                </el-tabs>
            </el-header>
            <el-main class="nopadding" v-if="groupId==0">
                <scTable ref="table" :apiObj="mainData" row-key="id" stripe border :params="query">
                    <el-table-column type="selection"  align="center" width="50"></el-table-column>
                    <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                    <el-table-column label="保养任务单号" prop="task_code" align="center"></el-table-column>
                    <el-table-column label="设备编号" prop="device_code" align="center"></el-table-column>
                    <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                    <el-table-column label="设备类别" prop="class_title" align="center"></el-table-column>
                    <el-table-column label="保养人" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="保养部门" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="保养开始时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="保养结束时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                </scTable>
            </el-main>
            <el-main class="nopadding" v-if="groupId==1">
                <scTable ref="table" :apiObj="taskData" stripe border :params="querys">
                    <el-table-column type="selection"  width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                    <el-table-column label="维修单号" fixed prop="code" align="center" width="150"></el-table-column>
                    <el-table-column label="设备代码" fixed prop="device_code" align="center" width="150"></el-table-column>
                    <el-table-column label="设备名称" prop="device_code" align="center" width="150"></el-table-column>
                    <el-table-column label="设备类别" prop="class_title" align="center" width="150"></el-table-column>
                    <el-table-column label="故障类别" prop="fault_title" align="center" width="150"></el-table-column>
                    <el-table-column label="紧急程度" prop="urgent_name" align="center" width="150">
                        <template #default="scope">
                            <el-tag v-if="scope.row.urgent_name=='特急'" type="danger">特急</el-tag>
                            <el-tag v-if="scope.row.urgent_name=='紧急'" type="warning">紧急</el-tag>
                            <el-tag v-if="scope.row.urgent_name=='普通'" type="success">普通</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="维修状态" prop="type" align="center" width="150">
                        <template #default="scope">
                            <el-tag v-if="scope.row.type==0" type="danger">待维修</el-tag>
                            <el-tag v-if="scope.row.type==1" type="danger">待验证</el-tag>
                            <el-tag v-if="scope.row.type==2" type="success">已验证</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="报修人" prop="admin_name" align="center" width="150"></el-table-column>
                    <el-table-column label="报修时间" prop="create_time" align="center" width="150"></el-table-column>
                    <el-table-column label="验证人" prop="admin_name" align="center" width="150"></el-table-column>
                    <el-table-column label="维修评价" prop="create_time" align="center" width="150"></el-table-column>
                    <el-table-column label="故障图片" prop="img"  align="center" width="150">
                        <template #default="{row}">
                                <el-image class="img" :src="row.img" :initial-index="4" fit="cover" preview-teleported="true" />
                            </template>
                    </el-table-column>
                    <el-table-column label="故障描述" prop="remark" align="center" width="150">
                        <template #default="scope">
                            <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.remark">
                            <template #reference>
                                <el-button style="padding: 5px 0;" text class="m-2">{{scope.row.remark.substring(0, 15)}}</el-button>
                            </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="维修人员" prop="user_name" align="center" width="150"></el-table-column>
                    <el-table-column label="派单时间" prop="work_time" align="center" width="150"></el-table-column>
                    <el-table-column label="维修建议" prop="suggest" align="center" width="150"></el-table-column>
                    <el-table-column label="配件要求" prop="require" align="center" width="150"></el-table-column>
                </scTable>
            </el-main>
            <el-main class="nopadding" v-if="groupId==2">
                <scTable ref="table" :apiObj="logData" row-key="id" stripe border :params="query">
                    <el-table-column type="selection"  align="center" width="50"></el-table-column>
                    <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                    <el-table-column label="巡检任务单号" prop="task_code" align="center"></el-table-column>
                    <el-table-column label="设备编号" prop="device_code" align="center"></el-table-column>
                    <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                    <el-table-column label="设备类别" prop="class_title" align="center"></el-table-column>
                    <el-table-column label="巡检人" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="巡检部门" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="巡检开始时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="巡检结束时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                </scTable>
            </el-main>
            <el-main class="nopadding" v-if="groupId==3">
                <scTable ref="table" :apiObj="logsData" stripe remoteSort remoteFilter border :params="query" >
                    <el-table-column type="selection"  align="center" width="50"></el-table-column>
                    <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                    <el-table-column label="点检任务单号" prop="task_code" align="center"></el-table-column>
                    <el-table-column label="设备编号" prop="device_code" align="center"></el-table-column>
                    <el-table-column label="设备名称" prop="device_title" align="center"></el-table-column>
                    <el-table-column label="设备类别" prop="class_title" align="center"></el-table-column>
                    <el-table-column label="点检人" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="点检部门" prop="admin_name" align="center"></el-table-column>
                    <el-table-column label="点检开始时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="点检结束时间" prop="create_time" align="center"></el-table-column>
                    <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                menuId:0,
                // menuList: [
                //     {id:0,name:"基础信息"},
                //     {id:1,name:"位置信息"},
                //     {id:2,name:"制造商信息"},
                //     {id:3,name:"财务信息"},
                //     {id:4,name:"维保信息"},
                //     {id:5,name:"特种信息"},
                //     {id:6,name:"附属设备"},
                //     // {id:7,name:"附件信息"},
                // ],
                info:{},
                // logData:[],//点检记录
                // taskData:[],//维修工单
                mainData:this.$API.device.ProjectLog.lists,//保养记录
                taskData:this.$API.device.deviceTask.getService,//维修记录
                logData: this.$API.device.InspectionProjectLog.lists,//巡检记录
                logsData: this.$API.device.deviceDianJian.record.lists,//点检记录
                query:{
                    device_id: this.$route.query.id,
                },
                querys:{
                    device_id: this.$route.query.id,
                    sta:2
                },
                groupId:"0"
            }
        },
        mounted () {
            // this.detail();
            // this.checkTask()
            // this.checkLog()
        },
        methods: {
            menuChange(item) {
                this.menuId = item.id
            },
            async detail(){
                var checkLog = await this.$API.all.getCheckLog.get({device_id:this.id});//点检记录
                this.logData = checkLog.data
                var checkTask = await this.$API.all.getTask.get({device_id:this.id});//维修工单
                this.taskData = checkTask.data
            },
            //维修工单
            async checkTask(){
                var res = await this.$API.all.getTask.get({device_id:this.id});
                this.taskData = res.data
            },
            //点检记录
            async checkLog(){
                var res = await this.$API.all.getCheckLog.get({device_id:this.id});
                this.logData = res.data
            },
            // tab切换
            tabChange(e){
                this.groupId = e
            },
        },
    }
</script>

<style lang="scss" scoped>
.display{
    display: flex;
    align-items: center;
    .title{
        width: 70px;
        text-align-last: justify;
        background: #f4faff;
        padding: 8px;
        margin: 5px 0;
    }
    .width{
        width: 80px;
    }
    .detail{
        margin-left: 10px;
        .img{
            width: 100px;
            height: 100px;
        }
    }
}
.left{
    display: flex;
    align-items: start;
    .tabbar{
        background: #f4f4f4;
        height: 80vh;
        margin-right: 20px;
        border-radius: 8px;
        .tabList{
            padding: 16px 34px;
            text-align: center;
            color: #000;
            border-radius: 4px;
            cursor: pointer;
        }
    }
}
.background{
    background: #01a066;
    color: #FFF !important;
}
</style>